<template>
	<view class="expert-detail-container">
		<!-- 顶部导航栏 -->
		<titleBar title="专家详情" :isSubPage="true"></titleBar>

		<!-- 专家信息卡片 -->
		<view class="expert-profile-card">
			<image :src="currentExpert.avatar" class="expert-avatar"></image>
			<view class="expert-info">
				<text class="expert-name">{{ currentExpert.name }}</text>
				<text class="expert-title">{{ currentExpert.title }}</text>
				<view class="expert-stats">
					<view class="stat-item">
						<text class="stat-count">{{ currentExpert.articles }}</text>
						<text class="stat-label">文章</text>
					</view>
					<view class="stat-item">
						<text class="stat-count">{{ currentExpert.followers }}</text>
						<text class="stat-label">粉丝</text>
					</view>
					<view class="stat-item">
						<text class="stat-count">{{ currentExpert.likes }}</text>
						<text class="stat-label">获赞</text>
					</view>
				</view>
			</view>
			<button class="follow-btn" :class="{ 'followed': isFollowed }" @click="toggleFollow">
				{{ isFollowed ? '已关注' : '+ 关注' }}
			</button>
		</view>

		<!-- 专家简介 -->
		<view class="expert-bio-section">
			<view class="section-title">
				<text class="title-text">个人简介</text>
			</view>
			<text class="expert-bio">{{ currentExpert.bio }}</text>
		</view>

		<!-- 专家文章列表 -->
		<view class="expert-articles-section">
			<view class="section-title">
				<text class="title-text">专家文章</text>
			</view>

			<view v-for="(article, index) in currentExpertArticles" :key="index" class="article-card"
				@click="goToArticleDetail(article.id)">
				<view class="article-content">
					<text class="article-title">{{ article.title }}</text>
					<text class="article-summary">{{ article.summary }}</text>
					<view class="article-meta">
						<text class="article-date">{{ article.date }}</text>
						<view class="article-stats">
							<text class="article-views">👁️ {{ article.views }}</text>
							<text class="article-likes">👍 {{ article.likes }}</text>
							<text class="article-comments">💬 {{ article.comments }}</text>
						</view>
					</view>
				</view>
				<image v-if="article.image" :src="article.image" class="article-image"></image>
			</view>

			<view v-if="loadingMore" class="loading-more">
				<text>加载中...</text>
			</view>
		</view>

		<!-- 咨询按钮 -->
		<!-- <view class="consult-btn-container">
			<button class="consult-btn" @click="consultExpert">向专家咨询</button>
		</view> -->
	</view>
</template>

<script>
	import titleBar from '@/components/titleBar.vue'

	export default {
		components: {
			titleBar
		},
		data() {
			return {
				expertId: null,
				isFollowed: false,
				loadingMore: false,
				allExperts: [{
						id: 1,
						name: '洪医生',
						title: '宠物营养学专家',
						avatar: '/static/forum/doctornv.png',
						bio: '毕业于北京农业大学兽医学院，从事宠物营养研究15年，拥有多年临床经验。致力于研究和推广科学的宠物饮食方案，曾参与多项宠物食品安全标准的制定工作。著有《宠物科学喂养指南》《猫咪营养全书》等多部畅销书籍。',
						specialties: ['宠物营养配方', '特殊疾病饮食', '猫犬均衡饮食', '食品安全评估'],
						articles: 42,
						followers: 3568,
						likes: 12653
					},
					{
						id: 2,
						name: '金教授',
						title: '宠物行为专家',
						avatar: '/static/forum/doctorna.png',
						bio: '北京动物医学研究院教授，美国宠物行为学会认证专家。专注研究犬猫行为习性及异常行为矫正20余年，擅长解决宠物分离焦虑、攻击性行为等心理问题。开创"金氏行为疗法"，帮助上万只问题行为宠物回归正常生活。',
						specialties: ['犬猫行为矫正', '分离焦虑治疗', '攻击性行为干预', '幼犬社会化训练'],
						articles: 36,
						followers: 4125,
						likes: 9876
					},
					{
						id: 3,
						name: '刘教授',
						title: '宠物皮肤病专家',
						avatar: '/static/forum/doctorna.png',
						bio: '上海兽医学院博士，欧洲兽医皮肤病学会会员。从事宠物皮肤病诊疗工作18年，对过敏性皮炎、自身免疫性皮肤病等疑难杂症有独特见解和丰富经验。主持研发多款宠物皮肤护理产品，获国家专利3项。',
						specialties: ['过敏性皮炎', '真菌感染', '自身免疫性皮肤病', '耳部疾病'],
						articles: 28,
						followers: 2897,
						likes: 8432
					},
					{
						id: 4,
						name: '竺教授',
						title: '宠物外科手术专家',
						avatar: '/static/forum/doctorna.png',
						bio: '哈尔滨兽医大学博士，美国康奈尔大学访问学者。专注于小动物骨科及软组织外科手术，尤其擅长微创手术和神经外科手术。曾成功完成国内首例犬只3D打印椎体置换手术，发表学术论文30余篇。',
						specialties: ['骨科手术', '神经外科手术', '微创腔镜技术', '肿瘤外科'],
						articles: 33,
						followers: 3210,
						likes: 10254
					},
					{
						id: 5,
						name: '郑教授',
						title: '宠物繁育遗传学专家',
						avatar: '/static/forum/doctorna.png',
						bio: '中国农业大学动物科学学院教授，长期从事宠物遗传疾病研究与优良品种选育工作。参与制定多项国家宠物繁育标准，对纯种犬猫的遗传病筛查和品种改良有深入研究。现任中国小动物繁育协会副会长。',
						specialties: ['遗传病筛查', '科学繁育指导', '品种鉴定', '产前产后护理'],
						articles: 25,
						followers: 2645,
						likes: 7823
					}
				],
				expertArticles: {
					1: [{
							id: 101,
							title: '猫咪的科学喂养指南',
							summary: '针对不同年龄段的猫咪，如何选择合适的食物和制定科学的喂养计划。文章详细介绍了从幼猫到老年猫的营养需求变化及喂食注意事项。',
							date: '2025-03-15',
							views: 2356,
							likes: 483,
							comments: 96,
							image: '/static/pet-test.png'
						},
						{
							id: 102,
							title: '常见宠物营养误区解析',
							summary: '纠正饲养宠物过程中常见的营养误区，避免因错误喂养导致的健康问题。特别针对生骨肉、纯素饮食等争议话题进行科学解读。',
							date: '2025-03-02',
							views: 1892,
							likes: 362,
							comments: 78,
							image: '/static/pet-test.png'
						},
						{
							id: 103,
							title: '如何为老年犬调整饮食',
							summary: '随着狗狗年龄的增长，它们的营养需求也会发生变化，本文介绍如何为老年犬调整饮食结构，预防和缓解老年疾病。',
							date: '2025-02-18',
							views: 1567,
							likes: 294,
							comments: 61
						}
					],
					2: [{
							id: 201,
							title: '解读犬只分离焦虑的行为表现与解决方案',
							summary: '详细分析犬只分离焦虑的成因、表现形式及系统化的治疗方案。包含循序渐进的训练步骤和环境调整建议。',
							date: '2025-03-20',
							views: 2145,
							likes: 427,
							comments: 85,
							image: '/static/pet-test.png'
						},
						{
							id: 202,
							title: '猫咪异常行为背后的心理密码',
							summary: '解析猫咪的标记行为、攻击性行为和强迫症行为背后的心理原因，提供行为干预的实用技巧和方法。',
							date: '2025-02-28',
							views: 1756,
							likes: 341,
							comments: 72
						},
						{
							id: 203,
							title: '正确社会化训练让幼犬健康成长',
							summary: '幼犬社会化的黄金期如何把握，详解8-16周龄幼犬的社会化训练要点及常见误区，帮助养成健康性格。',
							date: '2025-02-05',
							views: 1893,
							likes: 358,
							comments: 67,
							image: '/static/pet-test.png'
						}
					],
					3: [{
							id: 301,
							title: '宠物常见过敏性皮炎的诊断与家庭护理',
							summary: '介绍宠物过敏原识别方法、过敏性皮炎的症状表现，以及科学的家庭护理和治疗方案，减轻宠物瘙痒困扰。',
							date: '2025-03-12',
							views: 1823,
							likes: 315,
							comments: 64,
							image: '/static/pet-test.png'
						},
						{
							id: 302,
							title: '宠物真菌感染全方位防治指南',
							summary: '详解猫癣、皮肤癣等常见真菌性皮肤病的传播途径、症状识别、治疗方法及家庭环境消毒措施。',
							date: '2025-02-25',
							views: 1567,
							likes: 276,
							comments: 58
						}
					],
					4: [{
							id: 401,
							title: '宠物骨折的急救与治疗新进展',
							summary: '介绍宠物骨折的紧急处理要点、现代微创手术技术及术后康复训练方案，帮助宠物快速恢复健康活动能力。',
							date: '2025-03-25',
							views: 1692,
							likes: 328,
							comments: 56,
							image: '/static/pet-test.png'
						},
						{
							id: 402,
							title: '宠物神经系统疾病的外科治疗选择',
							summary: '解析椎间盘突出、脑肿瘤等神经系统疾病的外科手术指征、风险评估和最新手术技术进展。',
							date: '2025-03-08',
							views: 1435,
							likes: 287,
							comments: 49
						},
						{
							id: 403,
							title: '微创手术在宠物医疗中的应用前景',
							summary: '全面介绍宠物微创腔镜技术的发展历程、适应症及优势，分享典型病例的治疗效果和术后护理要点。',
							date: '2025-02-15',
							views: 1328,
							likes: 265,
							comments: 47,
							image: '/static/pet-test.png'
						}
					],
					5: [{
							id: 501,
							title: '纯种犬常见遗传疾病的筛查与防控',
							summary: '针对不同犬种的高发遗传疾病，介绍先进的基因检测技术和科学的繁育策略，降低疾病发生率。',
							date: '2025-03-18',
							views: 1437,
							likes: 256,
							comments: 51,
							image: '/static/pet-test.png'
						},
						{
							id: 502,
							title: '科学选择优质种公种母的标准与方法',
							summary: '从外貌特征、性格、健康状况和遗传背景等多方面，详解繁育用犬猫的选择标准和评估体系。',
							date: '2025-02-20',
							views: 1246,
							likes: 218,
							comments: 43
						}
					],
				}
			}
		},
		computed: {
			currentExpert() {
				const expert = this.allExperts.find(expert => expert.id === this.expertId) || this.allExperts[0];
				return expert;
			},
			currentExpertArticles() {
				return this.expertArticles[this.expertId] || [];
			}
		},
		mounted() {
			this.expertId = getApp().globalData.currentDoctorId || 1;

			console.log('当前加载的专家ID:', this.expertId);
		},
		onReachBottom() {
			// 滚动到底部加载更多文章
			this.loadMoreArticles();
		},
		methods: {
			loadExpertInfo() {
				// 模拟API请求，获取专家信息
				// 实际应用中应该通过 API 获取数据
				console.log('加载专家ID:', this.expertId, '的信息');
				// 这里使用的是静态数据，实际应该根据ID请求
			},
			toggleFollow() {
				this.isFollowed = !this.isFollowed;
				// 实际应用中应该调用关注/取消关注API
				uni.showToast({
					title: this.isFollowed ? '已关注' : '已取消关注',
					icon: 'none'
				});
			},
			goToArticleDetail(articleId) {
				// 跳转到文章详情页
				uni.navigateTo({
					url: '/pages/article/detail?id=' + articleId
				});
			},
			consultExpert() {
				// 跳转到咨询页面
				uni.navigateTo({
					url: '/pages/consult/chat?expertId=' + this.expertInfo.id + '&expertName=' + this.expertInfo
						.name
				});
			},
			loadMoreArticles() {
				// 确认当前专家还有更多文章可以加载
				const currentArticles = this.expertArticles[this.expertId] || [];
				if (currentArticles.length <= 3) {
					return; // 如果文章少于或等于3篇，不加载更多
				}

				this.loadingMore = true;

				// 模拟网络请求延迟
				setTimeout(() => {
					// 根据专家ID添加更多文章数据
					const moreArticles = [];

					if (this.expertId === 1) {
						moreArticles.push({
							id: 104,
							title: '宠物食品添加剂的真相',
							summary: '深入分析市面上宠物食品中常见添加剂的作用及安全性。解读食品标签背后的信息，帮助主人做出明智选择。',
							date: '2025-02-05',
							views: 1328,
							likes: 251,
							comments: 47,
							image: '/static/pet-test.png'
						}, {
							id: 105,
							title: '自制宠物零食的营养指南',
							summary: '如何在家制作健康且营养均衡的宠物零食，让您的爱宠吃得更健康。附有多种适合不同宠物的食谱及制作方法。',
							date: '2025-01-22',
							views: 1104,
							likes: 218,
							comments: 39
						});
					} else if (this.expertId === 2) {
						moreArticles.push({
							id: 204,
							title: '多猫家庭和谐相处的秘诀',
							summary: '探讨多猫家庭常见的领地冲突问题，提供空间布局、资源分配和行为引导的实用策略，创造和谐的多猫环境。',
							date: '2025-01-18',
							views: 1452,
							likes: 287,
							comments: 59,
							image: '/static/pet-test.png'
						});
					} else if (this.expertId === 3) {
						moreArticles.push({
							id: 303,
							title: '季节性皮肤病防治攻略',
							summary: '针对春夏秋冬不同季节多发的宠物皮肤问题，提供预防措施和护理方案，全年保护宠物皮肤健康。',
							date: '2025-02-08',
							views: 1335,
							likes: 241,
							comments: 52,
							image: '/static/pet-test.png'
						}, {
							id: 304,
							title: '宠物耳部疾病的家庭检查与护理',
							summary: '教您识别宠物耳部感染的早期信号，掌握正确的耳部清洁方法和用药技巧，预防慢性耳病发生。',
							date: '2025-01-15',
							views: 1183,
							likes: 209,
							comments: 45
						});
					} else if (this.expertId === 4) {
						moreArticles.push({
							id: 404,
							title: '宠物肿瘤外科治疗策略',
							summary: '介绍常见宠物肿瘤的外科处理原则、手术方式选择及术后监测要点，提高宠物肿瘤治疗的成功率。',
							date: '2025-01-28',
							views: 1257,
							likes: 231,
							comments: 43,
							image: '/static/pet-test.png'
						});
					} else if (this.expertId === 5) {
						moreArticles.push({
							id: 503,
							title: '犬猫妊娠期的科学护理方案',
							summary: '全面介绍母犬母猫妊娠各阶段的营养需求、运动管理、产前准备及可能出现的异常情况处理方法。',
							date: '2025-01-25',
							views: 1158,
							likes: 197,
							comments: 38,
							image: '/static/pet-test.png'
						}, {
							id: 504,
							title: '新生幼犬幼猫的健康评估与早期干预',
							summary: '详解新生宠物的健康检查要点、先天缺陷识别及早期干预措施，确保幼崽健康成长。',
							date: '2025-01-10',
							views: 1062,
							likes: 183,
							comments: 35
						});
					}

					if (moreArticles.length > 0) {
						// 添加到当前专家的文章列表中
						this.expertArticles[this.expertId] = [...(this.expertArticles[this.expertId] || []), ...
							moreArticles
						];
					}

					this.loadingMore = false;
				}, 1000);
			}
		}
	}
</script>

<style scoped>
	.expert-detail-container {
		background-color: #f4f4f4;
		padding-bottom: 120rpx;
	}

	.expert-profile-card {
		background-color: white;
		padding: 30rpx;
		margin: 20rpx;
		border-radius: 20rpx;
		display: flex;
		position: relative;
	}

	.expert-avatar {
		width: 160rpx;
		height: 160rpx;
		border-radius: 80rpx;
		margin-right: 30rpx;
	}

	.expert-info {
		flex: 1;
	}

	.expert-name {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
		display: block;
	}

	.expert-title {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 20rpx;
		display: block;
	}

	.expert-stats {
		display: flex;
		margin-top: 20rpx;
	}

	.stat-item {
		margin-right: 40rpx;
		text-align: center;
	}

	.stat-count {
		font-size: 28rpx;
		font-weight: bold;
		display: block;
	}

	.stat-label {
		font-size: 24rpx;
		color: #999;
		display: block;
	}

	.follow-btn {
		position: absolute;
		top: 30rpx;
		right: 30rpx;
		background-color: #F9CB43;
		color: white;
		font-size: 26rpx;
		padding: 10rpx 30rpx;
		border-radius: 30rpx;
		border: none;
	}

	.followed {
		background-color: #ddd;
	}

	.title-text {
		font-size: 32rpx;
		font-weight: bold;
		position: relative;
		padding-left: 20rpx;
	}

	.title-text::before {
		content: '';
		position: absolute;
		left: 0;
		top: 10rpx;
		height: 30rpx;
		width: 8rpx;
		background-color: #F9CB43;
		border-radius: 4rpx;
	}

	.section-title {
		margin: 30rpx 20rpx 20rpx 20rpx;
	}

	.expert-bio-section {
		background-color: white;
		margin: 20rpx;
		padding: 20rpx;
		border-radius: 20rpx;
	}

	.expert-bio {
		font-size: 28rpx;
		color: #333;
		line-height: 1.6;
	}

	.expert-articles-section {
		margin-top: 20rpx;
	}

	.article-card {
		background-color: white;
		margin: 0 20rpx 20rpx 20rpx;
		padding: 20rpx;
		border-radius: 20rpx;
		display: flex;
	}

	.article-content {
		flex: 1;
		margin-right: 20rpx;
	}

	.article-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
		display: block;
	}

	.article-summary {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 20rpx;
		display: block;
		line-height: 1.4;
	}

	.article-meta {
		display: flex;
		justify-content: space-between;
		font-size: 24rpx;
		color: #999;
	}

	.article-stats {
		display: flex;
	}

	.article-views,
	.article-likes {
		margin-right: 20rpx;
	}

	.article-image {
		width: 180rpx;
		height: 180rpx;
		border-radius: 10rpx;
		object-fit: cover;
	}

	.loading-more {
		text-align: center;
		padding: 20rpx;
		color: #999;
		font-size: 24rpx;
	}

	.consult-btn-container {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: white;
		padding: 20rpx;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.consult-btn {
		background-color: #F9CB43;
		color: white;
		font-size: 32rpx;
		padding: 20rpx;
		border-radius: 50rpx;
		border: none;
		width: 90%;
	}
</style>